<template>
    <div id="scrollFpzq">
        <!-- <yd-pullrefresh :callback="callLoadList" ref="pullrefreshDemo"> -->
        <div class="fiexd_search">
            <yd-search v-model="value" cancel-text='' :on-submit="submitHandler"></yd-search>
            <ul class="fiexd_ul">
                <li @click.stop="show = true">
                    {{model}}
                    <yd-icon name="arrow-left-copy" custom slot="icon"></yd-icon>
                </li>
                <li @click.stop="yearShow = true">
                    {{datetime}}
                    <yd-icon name="arrow-left-copy" custom slot="icon"></yd-icon>
                </li>
            </ul>
        </div>
        <yd-infinitescroll ref="infinitescrollDemo">
            <!--扶贫  -->
            <yd-list theme="5" class="loadList" slot="list">
                <yd-list-item v-for="(item, key) in list" :key="key">
                    <img slot="img" style="width:100%;min-height:2.2rem" @click="lovefplist(item.specialId,item.specialStoreId)" v-if="item.specialImage" :src="imgUrl+item.specialImage">
                    <span slot="title">{{item.specialTitle}}</span>
                    <yd-list-other slot="other">
                        <div>
                            <span class="demo-list-time">
                                <em>时间：</em>{{item.specialModifyTime | formatDate}}
                            </span>
                        </div>
                    </yd-list-other>
                </yd-list-item>
            </yd-list>
            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">—— 到底啦 ——</span>
            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
        </yd-infinitescroll>
        <!-- </yd-pullrefresh> -->
        <yd-cityselect v-model="yearShow" title='选择年份' ref="cityselectYear" :callback="datetimeSeach" :items="districtYear"></yd-cityselect>
        <yd-cityselect v-if="district.length>0" v-model="show" title='选择地区' ref="cityselectDemo" :callback="result" :items="district"></yd-cityselect>
        <yd-backtop></yd-backtop>
    </div>
</template>

<script>
var districtYear = [
    {
        "v": "11",
        "n": "2015"
    },
    {
        "v": "12",
        "n": "2016"
    },
    {
        "v": "13",
        "n": "2017"
    },
    {
        "v": "14",
        "n": "2018"
    },
    {
        "v": "15",
        "n": "2019"
    },
    {
        "v": "16",
        "n": "2020"
    },
    {
        "v": "17",
        "n": "2021"
    },
    {
        "v": "18",
        "n": "2022"
    },
]
// import District from 'ydui-district/dist/jd_province_city';
import moment from 'moment'

export default {
    name: 'scroll',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            value: '',
            regionId: '',
            model: '所有地区',
            datetime: '全部时间',
            district: [],
            districtYear: districtYear,
            list: [],
            page: 1,
            pageSize: 100,
            show: false,
            yearShow: false
        }
    },
    filters: {
        formatDate(date) {
            if (date == undefined || date == '') {
                return "无";
            }
            return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss");
        }
    },
    created: function() {
        this.fpfcList();
        this.init();
    },
    methods: {
        init() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/countryorcompany?paramType=county')
                .then((response) => {
                    if (response.status == 200) {
                        let a = JSON.stringify(response.data.object);
                        let b = a.replace(/paramId/g, 'v').replace(/paramValue/g, 'n');
                        this.district = JSON.parse(b);
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        submitHandler() {
            // this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            // this.model = '所有地区';
            // this.datetime = '全部时间';
            this.fpfcList();
        },
        datetimeSeach(ret) {
            this.value = '';
            this.datetime = ret.itemName1;
            this.fpfcList();
        },
        lovefplist(specialId, specialStoreId) {
            this.$router.push({
                name: 'lovefplist',
                query: {
                    specialId: specialId,
                    specialStoreId: specialStoreId
                }
            });
        },
        result(ret) {
            // this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.regionId = ret.itemValue1
            this.model = ret.itemName1;
            this.list = [];
            this.fpfcList();
        },
        open() {
            this.$refs.datetime.open();
        },
        //扶贫风采
        fpfcList() {
            let datetime = '';
            if (this.datetime == '全部时间') {
                datetime = '';
            } else {
                datetime = this.datetime;
            }
            let msg = this.$qs.stringify({
                regionId: this.regionId,
                title: this.value,
                year: datetime,
                pageSize: this.pageSize
            })
            this.$dialog.loading.open('请稍后');
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'supportPoor/list', msg)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.list = response.data.object;
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        callLoadList() {
            this.value = '';
            // this.regionId = '';
            // this.datetime = '全部时间';
            this.page = 1;
            this.list = [];
            this.fpfcList();
        }
    }
}
</script>
<style scoped>
#scrollFpzq {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-top: 1.8rem;
}

.fiexd_search {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    box-shadow: 0 3px 6px #DACDBA;
}

.fiexd_ul {
    width: 100%;
    height: 0.8rem;
    line-height: 0.6rem;
    font-size: 14px;
    color: #DACEB8;
    box-sizing: border-box;
    padding: 0.1rem 0;
    background: #fff;
    text-align: center;
}

#scrollFpzq .demo-list-price {
    font-size: 14px;
    color: #c7000a;
}

.fiexd_ul li {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.fiexd_ul li:nth-of-type(1) {
    border-right: 1px solid #EDEDED;
}

.fiexd_ul li {
    display: flex;
    align-content: center;
    justify-content: center;
}
</style>

<style>
#scrollFpzq .loadList .yd-list-img {
    padding-bottom: 0!important;
}

#scrollFpzq .fiexd_ul i {
    font-size: 14px!important;
    margin-left: 5px;
}

#scrollFpzq .fiexd_ul [class^="icon-custom-"]:before,
[class*=" icon-custom-"]:before {
    font-size: 14px!important;
}

#scrollFpzq .yd-search-input {
    background: #DACDBA;
}

#scrollFpzq .loadList .yd-list-img {
    min-height: 2rem;
    padding-bottom: 0!important;
}

.yd-datetime .yd-datetime-item:nth-of-type(2) {
    display: none!important;
}
</style>